<template>
  <div class="order-detail-goods">
    <!-- v-if="is_delivery_supplier>1 && detail.delivery_supplier.length>1" -->
    <!-- <div
      class="item-block"
      v-if="detailAll.is_delivery_supplier>1 && detail.delivery_supplier.length>1"
    > -->
      <!-- <a href='/Order/detail/id/{$detail.order_id}/supid/{$suppler_vo["0"]}<if condition="$gys eq gys">/identity/gys</if>'>包裹{$key+1}</a> -->
      <!-- <van-tabs v-model="active">
        <van-tab :title="'包裹'+(index+1)" v-for="(item,index) in detail.delivery_supplier" :key="index" @click="clickTab(item)"></van-tab>
      </van-tabs>-->
      <!-- <ul class="tabs">
        <li
          v-for="(item,index) in detail.delivery_supplier"
          :key="index"
          :class="detailAll.supid==item[0]?'active':''"
          @click="clickTab(detail.order_id,item)"
        >包裹{{index+1}}</li>
      </ul>
    </div> -->

    <div class="item-block goods-container">
      <!-- <if condition="$detail['is_transaction_snapshot'] eq 1">
            <p style="color: #999; font-size: 12px;">点击商品查看交易快照 </p>
      </if>-->
      <!-- 小程序段暂时隐藏交易快照 -->
      <div class="title" v-if="detail.is_transaction_snapshot==1">点击商品查看交易快照</div>
      <ul class="order-goods" v-if="detail.store_gathering_id!=0">
        <li class="goods-li">
          <section class="order-goods-img">
            <a href="javascript:;">
              <img
                src="https://img.wifenxiao.com/h5-wfx/images/order/money.png"
                width="80"
                height="80"
              />
            </a>
          </section>
          <section class="order-goods-infor g-flex">
            <div class="left">
              <a href="javascript:;" class="goods-title">门店收款码订单</a>
              <!-- <p class="goods-props" v-if="goods.property">{{goods.property}}</p> -->
              <p class="price fl" v-if="detail.pay_type && detail.pay_type==5">
                &dollar;
                <em>{{detail.payment}}</em>}
              </p>
              <span class="price" v-else v-html="scaleGoodsPriceFn(detail.payment)"></span>
            </div>
            <!-- <div class="right">
              <span class="num fr"><i>x</i>{{goods.num}}</span>
            </div>-->
          </section>
        </li>
      </ul>
      <ul class="order-goods" v-for="(goodsLi,index) in detail.item" :key="index">
        <section class="gys_info" v-if="goodsLi.gys_id && goodsLi.gys_id > 0">
          <img class="gys_logo" :src="goodsLi.gys_logo || defaultAvatar" alt />
          <span>{{goodsLi.gys_name}}</span>
          <img class="arrow" src="https://img.wifenxiao.com/h5-wfx/images/arrow_R.png" alt />
        </section>
        <li
          v-for="(goods,index) in goodsLi.list"
          :key="index"
          class="goods-li"
          @click="goodsLink(goods)"
        >
          <section class="order-goods-img">
            <!-- <a href="<if condition="$detail['status'] eq 1 && $groupBuy_num gt 1 && $groupBuy_left">{$jsapi_url}<elseif condition="$detail['is_transaction_snapshot'] eq 1"/>/mb/order/snapshot?order_item_id={$item_vo.order_item_id}
            <else/>/Item/detail/id/{$item_vo.item_id}</if>" class="clearfix">-->
            <a href="javascript:;">
              <img
                :src="goods.pic_url+'160x160'"
                width="80"
                height="80"
                v-if="goods.is_compress==1"
              />
              <img :src="goods.pic_url" width="80" height="80" v-else />
            </a>
          </section>
          <section class="order-goods-infor g-flex">
            <div class="left">
              <a href="javascript:;" :class="receipt?'goods-title-new':'goods-title'">{{goods.title}}</a>
              <!-- 所有图标 -->
              <div class="item-tips-box">
                <span
                  class="item-tips fontBaos icon_bssp"
                  v-if="detailAll.is_open_kuajing==1 && goods.item_config.kuajing_type==1"
                >保税商品</span>
                <span
                  class="item-tips icon_hwzy"
                  v-else-if="detailAll.is_open_kuajing==1 && goods.item_config.kuajing_type==2"
                >海外直邮</span>
                <span class="item-tips fontZhouQG" v-if="goods.item_cycle_buy_id">周期购</span>
              </div>
              <!-- <p class="goods-props" v-if="goods.freight_payer==4">（运费到付）</p> -->
              <!-- <p class="goods-props" v-if="goods.item_cycle_buy_id">周期购</p> -->
              <div class="goods-props" v-if="goods.props">{{goods.props}}</div>
              <!-- <div class="goods-date" v-if="goods.order_extry && goods.order_extry.item_date">{{goods.item_config.shopping_date_name}}：{{goods.order_extry.item_date}}</div>
              <div class="goods-memo" v-if="goods.order_extry && goods.order_extry.item_memo">备注：{{goods.order_extry.item_memo}}</div>-->
              <div class="price" v-if="detail.pay_type && detail.pay_type==5">
                &dollar;
                <em>{{goods.price}}</em>}
              </div>
              <div class="price" v-else v-html="scaleGoodsPriceFn(goods.price)"></div>
            </div>
            <div class="right">
              <span class="num fr">
                <i>x</i>
                {{goods.num}}
              </span>
            </div>
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { scaleGoodsPrice } from '@/utils/index.js'
import { Tab, Tabs } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
export default Vue.extend({
  props: {
    /* otherData: {
      type: Object,
      default: () => {
        return {}
      }
    }, */
    detailAll: {
      type: Object,
      default: () => ({})
    },
    receipt: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    detail() {
      return this.detailAll.detail
    }
  },
  data() {
    return {
      defaultAvatar:
        'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
      // active: 0
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    goodsLink(goods) {
      // TODO 小程序端订单详情点击图片跳转商品详情，微分销维持不变，下次增加交易快照再次处理
      if (
        this.detailAll.detail.status == 1 &&
        this.detailAll.groupBuy_num > 1 &&
        this.detailAll.groupBuy_left
      ) {
        // window.location.href = this.detailAll.jsapi_url
        // 拼团商品
        this.JumpName('item-group', {
          groupId: this.detailAll.detail.group_shopping_id,
          item_id: goods.item_id
        })
      } else if (this.detailAll.detail.is_transaction_snapshot == 1) {
        this.JumpName('snapshot', { order_item_id: goods.order_item_id })
      } else {
        this.JumpName('item-detail', { detailId: goods.item_id })
      }
      // }
    },
    // 分单切换
    clickTab(id, item) {
      // console.log(item)
      if (this.detail.gys == 'gys') {
        this.JumpName('order-detail', {
          id,
          supid: item[0],
          identity: 'gys'
        })
      } else {
        this.JumpName('order-detail', { id, supid: item[0] })
      }
    }
    /* ItemDetail(item_id) {
      let url = `/Item/detail/id/${item_id}`
      if (
        this.detail.status == 1 &&
        this.otherData.groupBuy_num > 1 &&
        this.otherData.groupBuy_left
      ) {
        url = this.otherData.jsapi_url
      }
      return url
    } */
  }
})
</script>

<style lang="scss">
// @import "src/styles/mixin";
@import "src/styles/variables";
@import "src/styles/order/detail";
// https://img.wifenxiao.com/h5-wfx/images/order/
.order-detail-goods .order-goods .order-goods-infor .right {
  margin-top: 110px !important;
}
// .order-detail-goods
.order-detail-goods {
  .goods-container {
    background-image: url(https://img.wifenxiao.com/h5-wfx/images/order/order_success.png) !important;
    background-repeat: no-repeat !important;
    background-position: 490px 0 !important;
    background-size: 150px 150px !important;
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    li {
      position: relative;
      font-size: 26px;
      color: #666;
      &.active {
        font-size: 28px;
        color: #333;
        &::after {
          content: "";
          width: 54px;
          height: 4px;
          background: linear-gradient(
            90deg,
            rgba(242, 11, 34, 1),
            rgba(242, 11, 34, 0.2)
          );
          position: absolute;
          left: 50%;
          bottom: -12px;
          margin-left: -27px;
        }
      }
    }
  }
  .goods-container {
    .title {
      margin-bottom: 30px;
    }
  }
  .order-goods {
    margin-bottom: 30px;
    padding-bottom: 36px;
    border-bottom: 1px solid #ededed;
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .order-goods-infor {
      // .left{
      //   display:flex;
      //   flex-direction:column;
      //   justify-content: space-between;
      // }
      .item-tips-box {
        margin-top: 16px;
        .item-tips {
          // @include alignTop;
          font-size: 20px;
          line-height: 24px;
          padding: 5px 12px;
          background: #ddd;
          margin-right: 10px;
          margin-bottom: 12px;
          border-radius: 24px;
          @include btnGroup($fontDefault, $bgDefault);
          &.fontZhouQG {
            @include btnGroup($fontZhouQG, $bgZhouQG);
          }
          &.fontBaos {
            color: #fff;
            @include gradient(right, #ff2a40, #fe3c70);
          }
        }
      }
      .price {
        display: block;
        position: initial;
        margin-top: 16px;
      }
    }
  }
}
.goods-title-new {
  font-weight: bold;
  font-size: 28px;
  height: auto;
  line-height: 1.4;
}
</style>